<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<p>111</p>
			<span>222</span>
			<i>333</i>
			<!-- 注释 -->
		</div>
		
		<script>
			//var box=document.getElementById("box");
			//childNodes 查找子节点（文本节点，元素节点，注释节点）
			//console.log(box.childNodes);
			
			//firstChild 查找第一个子节点
			//console.log(box.firstChild);
			
			//firstChild 查找最后一个子节点
			//console.log(box.lastChild);
			
			var span=document.querySelector("span");
			//previousSibling 上一个兄弟节点
			//console.log(span.previousSibling);
			
			//nextSibling 下一个兄弟节点
			//console.log(span.nextSibling);
			
			//查找父节点
			console.log(span.parentNode);
			
			
			//----------------------------------------------找标签
			
			//children 查找子 “元素节点”
			//console.log(box.children);
			
			//查找第一个“元素节点”
			//console.log(box.firstElementChild);
			
			//lastElementChild 查找最后一个“元素节点”
			//console.log(box.lastElementChild);
			
			//var span=document.querySelector("span");
			
			//previousElementSibling 上一个兄弟“元素节点”
			//console.log(span.previousElementSibling);
			
			//nextSibling 下一个兄弟“元素节点”
			//console.log(span.nextElementSibling);
			
			//查找 父元素节点
			console.log(span.parentElement);
		</script>
	</body>
</html>
